<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,width=device-width"/>
<link rel="stylesheet" type="text/css" href="../bootstrap4/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<title>在线商城</title>
</head>
<body>
<div class="banner hidden-sm-down">
	<img class="banner_img" src="../img/bg.jpg" />
	<img class="logo" src="../img/logo.png" />
</div>
<header class="my-header">
	<nav class="navbar navbar-light bg-faded">
		<div class="container">
			<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
			<a href="" class="btn btn-outline-secondary float-xs-right">退出</a>
			<a href="/" class="form-inline float-xs-right center">
	        	<img src="../img/Personal-Center.png" />
				<span>个人中心</span>
		    </a>
		    <div class="collapse navbar-toggleable-xs" id="navbar-header">
		      <ul class="nav navbar-nav">
		      	<li class="nav-item">
		          <a class="nav-link" href="#">Navbar</a>
		      	</li>
		        <li class="nav-item dropdown">
				    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
				    <div class="dropdown-menu">
				      <a class="dropdown-item" href="#">Action</a>
				      <a class="dropdown-item" href="#">Another action</a>
				      <a class="dropdown-item" href="#">Something else here</a>
				      <div class="dropdown-divider"></div>
				      <a class="dropdown-item" href="#">Separated link</a>
				    </div>
				</li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">Features</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">Pricing</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">About</a>
		        </li>
		      </ul>
		    </div>
		</div>
	</nav>
</header>	
<section class="container pd20 mall_box my">
	<button type="button" id="btn" class="btn btn-success float-xs-right ml20">
		<img class="spc" src="../img/shopping-cart2.png"/>
		购物车
	</button>
	<div class="sp_car none" id="spc">
		<table class="table">
		  <thead class="thead-inverse">
		    <tr>
		      <th>名称</th>
		      <th>个数</th>
		      <th>金额</th>
		      <th>个数</th>
		      <th>金额</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <td>Mark</td>
		      <td>Otto</td>
		      <td>@mdo</td>
		      <td>Otto</td>
		      <td>@mdo</td>
		    </tr>
		    <tr>
		      <td>Jacob</td>
		      <td>Thornton</td>
		      <td>@fat</td>
		      <td>Otto</td>
		      <td>@mdo</td>
		    </tr>
		    <tr>
		      <td>Larry</td>
		      <td>the Bird</td>
		      <td>@twitter</td>
		      <td>Otto</td>
		      <td>@mdo</td>
		    </tr>
		  </tbody>
		</table>
		<div class="flex">
			<p class="spc_sum">奖金积分总额：<span>￥1000</span></p>
			<p class="spc_sum">购物积分总额：<span>￥1000</span></p>
			<p class="spc_sum">产生pv总额：<span>￥1000</span></p>
		</div>
		<a class="btn btn-danger float-xs-right mg10" href="#" role="button">结算</a>
	</div>
	<form class="form-inline navbar-form">
	    <select class="form-control" id="exampleSelect1">
	      <option>快捷查找</option>
	      <option>2</option>
	      <option>3</option>
	      <option>4</option>
	      <option>5</option>
	    </select>
		<input class="form-control" type="text" placeholder="搜索">
		<button class="btn btn-success-outline hidden-sm-down" type="submit">搜索</button>
	</form>
	<div class="clearfix"></div>
	<div class="row mt20 mall">
		<div class="col-xs-12 col-md-4 col-xl-3">
			<figure class="figure">
			  <a href="Details.html"><img src="../img/product.jpg" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure."></a>
			  	<ul class="my_money clearfix">
			  		<li><span class='txt'>购物积分</span><span class="money">￥5900</span></li>
			  		<li><span class='txt'>购物积分</span><span class="money">￥5900</span></li>
			  		<li><span class='txt'>购物积分</span><span class="money">￥5900</span></li>
			  	</ul>	
			  <p class="product_name">针叶樱桃维C咀嚼片</p>
			  <span class="input-number-decrement">–</span><input class="input-number" type="number" value="1" min="0" max="100"><span class="input-number-increment">+</span>
			  <img class="product_img" src="../img/shopping cart.png"/>
			  <button class="up_car">加入购物车</button>
			</figure>
		</div>
	</div>		
	<p class="page_number float-xs-left">共<span>1</span>页，当前第<span>1</span>页</p>
	<nav class="page float-xs-right" aria-label="...">
	  <ul class="pagination">
	    <li class="page-item disabled">
	      <a class="page-link" href="#" tabindex="-1" aria-label="Previous">
	        <span aria-hidden="true">&laquo;</span>
	        <span class="sr-only">Previous</span>
	      </a>
	    </li>
	    <li class="page-item active">
	      <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
	    </li>
	    <li class="page-item"><a class="page-link" href="#">2</a></li>
	    <li class="page-item"><a class="page-link" href="#">3</a></li>
	    <li class="page-item"><a class="page-link" href="#">4</a></li>
	    <li class="page-item"><a class="page-link" href="#">5</a></li>
	    <li class="page-item">
	      <a class="page-link" href="#" aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	        <span class="sr-only">Next</span>
	      </a>
	    </li>
	  </ul>
	</nav>
</section>
</body>
<script src="../jquery-3.0.0/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap4/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(e) {
    $("#btn").click(function(e) {
    $("#spc").toggle();
    });
    
    $(".input-number").prev().click(function(){
    	var value = $(this).next().val();
    	value--;
    	if(value>=0){
    		$(this).next().val(value);
    	}
    });
    $(".input-number").next().click(function(){
    	var value = $(this).prev().val();
    	value++;
    	$(this).prev().val(value);
    });
    
});
	
</script>
</html>